<template>
  <div class="w750 white-bg" :class="themes.theme">
    <div class="m-tabs">
      <a href="javascript:;" class="item" :class="{'line-on': couponStatus == 1}" @click="changeStatus(1)"><span class="txt">未使用</span></a>
      <a href="javascript:;" class="item" :class="{'line-on': couponStatus == 2}" @click="changeStatus(2)"><span class="txt">已使用</span></a>
      <a href="javascript:;" class="item" :class="{'line-on': couponStatus == ''}" @click="changeStatus('')"><span class="txt">已过期</span></a>
    </div>
    <div class="coupons" v-if="couponList&&couponList.length">
      <div class="get-coupons">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <template v-if="couponStatus == 1">
            <div class="list-item red-packet  red-got"  v-for="(item,index) in couponList" :key="index">
              <div class="left">
                <div class="num">&#65509;<span class="price">{{item.offPrice}}</span></div>
                <span class="condition">满{{item.fullPrice}}元可用</span>
              </div>
              <div class="right">
                <div class="des">
                  <template v-if="item.couponProvider == 'platform'">
                    <i class="coupon-style" v-if="item.couponType == 'common'">平台</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'shop'">店铺</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'category'">品类</i>
                  </template>
                  <template v-else-if="item.couponProvider == 'shop'">
                    <i class="coupon-style" v-if="item.couponType == 'common'">店铺</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'product'">商品</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'category'">品类</i>
                  </template>
                  {{item.couponName}}
                </div>
                <div class="han">
                  <span class="use-time">{{ item.getTime | dateformat('YYYY-MM-DD')}}-{{ item.endDate | dateformat('YYYY-MM-DD')}}</span>
                  <!--<button class="get-btn">立即使用</button>-->
                </div>
                <div class="det">平台优惠</div>
              </div>
            </div>            
          </template>

          <!-- /优惠券 -->
          <!-- 过期、已使用 -->
          <template v-if="couponStatus == 2">
            <div class="list-item  red-packet used"  v-for="(item,index) in couponList" :key="index">
              <div class="left">
                <div class="num">&#65509;<span class="price">{{item.offPrice}}</span></div>
                <span class="condition">满{{item.fullPrice}}元可用</span>
              </div>
              <div class="right">
                <div class="des">
                  <template v-if="item.couponProvider == 'platform'">
                    <i class="coupon-style" v-if="item.couponType == 'common'">平台</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'shop'">店铺</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'category'">品类</i>
                  </template>
                  <template v-else-if="item.couponProvider == 'shop'">
                    <i class="coupon-style" v-if="item.couponType == 'common'">店铺</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'product'">商品</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'category'">品类</i>
                  </template>
                  {{item.couponName}}
                </div>
                <div class="han">
                  <span class="use-time">{{ item.getTime | dateformat('YYYY-MM-DD')}}-{{ item.endDate | dateformat('YYYY-MM-DD')}}</span>
                  <button class="get-btn">已使用</button>
                </div>
                <div class="det">{{item.siteName}}</div>
              </div>
            </div>
          </template>

          <template v-if="couponStatus == ''">
            <div class="list-item red-packet used"  v-for="(item,index) in couponList" :key="index">
              <div class="left">
                <div class="num">&#65509;<span class="price">{{item.offPrice}}</span></div>
                <span class="condition">满{{item.fullPrice}}元可用</span>
              </div>
              <div class="right">
                <div class="des">
                  <template v-if="item.couponProvider == 'platform'">
                    <i class="coupon-style" v-if="item.couponType == 'common'">平台</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'shop'">店铺</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'category'">品类</i>
                  </template>
                  <template v-else-if="item.couponProvider == 'shop'">
                    <i class="coupon-style" v-if="item.couponType == 'common'">店铺</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'product'">商品</i>
                    <i class="coupon-style" v-else-if="item.couponType == 'category'">品类</i>
                  </template>
                  {{item.couponName}}
                </div>
                <div class="han">
                  <span class="use-time">{{ item.getTime | dateformat('YYYY-MM-DD')}}-{{ item.endDate | dateformat('YYYY-MM-DD')}}</span>
                  <button class="get-btn">已过期</button>
                </div>
                <div class="det">{{item.siteName}}</div>
              </div>
            </div>
          </template>

        </van-list>
        <!-- /过期、已使用 -->
      </div>
    </div>
    <div class="empty"  v-if="!couponList || !couponList.length">
      <div class="item-img"><img src="../../../assets/images/red-empty.png" alt=""></div>
      <div class="item-txt">您没有可用的红包</div>
      <div class="item-btn" @click="goRecCenter">去领取</div>
    </div>
    <div style="height: 38px;width: 100%;">

    </div>
    <div class="coupon-btn">
      <a href="javascript:;" class="btn-a" @click="goRecCenter">领券中心</a>
      <a href="javascript:;" class="btn-a" @click="goGetCoupon">卡密领券</a>
    </div>
  </div>
</template>

<script>
  import { Swipe , SwipeItem  , NavBar , List } from "vant";
  import { myRedPack } from "api/coupon";
  import {mapState} from 'vuex'
  export default {
    name: "HelloWorld",
    components: {
      NavBar
    },
    data() {
      return {
         
        loading: false,               //控制加载状态
        loadFinished: true,            //加载的锁
        finished: false,              //控制加载状态
        page: 1,                      //当前page
        total: '',                    //数据总条数
        pageSize: '',                    //单页面数据条数
        couponList: [],                 //优惠券列表
        couponStatus: 1,                 //优惠券状态
      };
    },

    watch: {

    },
    mounted() {
      let that = this

      myRedPack({useStatus: this.couponStatus,curPageNO: this.page}).then(res => {
        if(res.status == 1) {
          this.couponList = res.result.resultList
          this.total = res.result.total
          this.pageSize = res.result.pageSize
        }
      })
    },
    methods: {
      //返回
      goback() {
        this.$router.back();
        this.$router.isBack = true
      },
      //改变 状态
      changeStatus(status) {
        this.couponStatus = status
        this.page = 1
        this.total = null
        this.Nomsg = false
        this.finished = false  //重置判断更多
        myRedPack({useStatus: this.couponStatus,curPageNO: this.page}).then(res => {
          if(res.status == 1) {
            this.couponList = res.result.resultList
            this.total = res.result.total
            this.pageSize = res.result.pageSize
          }
        })
      },
      //下垃加载请求
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          this.page++
          if(this.couponList.length >= this.total) {
            this.finished = true;
            this.loading = false;
          }else {
            myRedPack({useStatus: this.couponStatus,curPageNO: this.page}).then(res => {
              for(var i = 0 ; i< res.result.resultList.length; i++) {
                this.couponList.push(res.result.resultList[i]);
              }
              // 加载状态结束
              this.loading = false;
              // 数据全部加载完成
              if (this.couponList.length >= this.total) {
                this.finished = true;
              }
            })
          }

        }, 500);
      },
      //卡密领取卡券
      goGetCoupon() {
        this.$router.push({
          path: `/recPacket`,
          query: {
            getType: 'platform'
          }
        });
      },
      //优惠券中心
      goRecCenter() {
        this.$router.push('/walletModules/recCenter/recCenter')
      }
    },
    computed: {
      ...mapState(['themes']),
    }
  };
</script>


<style src="../../../assets/css/get-coupons.css" scoped></style>
<style src="../../../assets/css/empty.css" scoped></style>
<style scoped>
/* 让Tab栏固定在顶部 */
.m-tabs{
    position: fixed;
    top: 44px;
    width: 100%;
    max-width: 750px;
	background: #fff;
	z-index: 1;
}
</style>

